<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>模拟jQuery库，体验使用第三方实用库的特点【图片隐藏与显示】</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
	
	<img src="images/zgl.jpg"/>
	
	<input id="hide" type="button" value="隐藏" style="position:absolute;top:250;left:50"/>
		&nbsp;&nbsp;&nbsp;&nbsp;
	<input id="show" type="button" value="显示" style="position:absolute;top:250;left:120"/>
	
	<script type="text/javascript">
		//定位隐藏按钮，同时提供单击事件
		document.getElementById("hide").onclick = function(){
			//定位图片
			var img = document.images[0];	
			//隐藏图片
			img.style.visibility = "hidden";
		}
		
		//定位显示按钮，同时提供单击事件
		document.getElementById("show").onclick = function(){
			//定位图片
			var img = document.images[0];	
			//隐藏图片
			img.style.visibility = "visible";
		}
	</script>
		

  </body>
</html>
